import Taro, {Component} from '@tarojs/taro'
import { View,Text,Image,Button } from '@tarojs/components'
import { AtAvatar,AtList,AtListItem,AtModal,AtModalContent,AtButton,AtModalHeader,AtModalAction } from 'taro-ui'           
import './wujianxiTeamInfo.scss'
import touxiang from '../../img/touxiang3.png'
import star from '../../img/star.png'
import right from '../../img/right.png'
import app from '../../main';

export default class WujianxiTeamInfo extends Component {
    config = {
        navigationBarTitleText:''
    } 

    constructor () {
        super(...arguments)
        this.state = {
            open: false,
            isOpened: false,
            // 领衔医生及其他数据
            docTeamInfo: {
                "id":"1",
                "type":"主任医师",
                "title":"无间隙的团队",
                "name":"张黎明",
                "gender":"男",
                "phone":"12344321123",
                "head_image":"https://zhongsheng.bayou-tech.cn/img/touxiang3.png",
                "hospital":"yiyuan",
                "department":"yanke",
                "positional_title":"zhicheng",
                "speciality":"各种黄斑疾病，糖尿病视网膜病变，视网膜脱落，各种疑难眼底病的手术，复查白内障...",
                "summary":"jianjie",
                "province":"hunan",
                "head":"领衔专家",
                "city":"cs",
                "koubei":"5.0",
                "totalprice":"19.00",
                "coupon_discount":"10.00",
                "totalpayble":"9.00",
                "fuwushu":"100",
                "huifushu":"100"
            },
            // 团队其他医生数据
            docTeamInfos: [],
        } 
    }
    handleClickModal() {
      this.setState({
        isOpened : true
      })      
    }
    handleClick (value) {
        this.setState({
        open: value
        })
    }
    handlseClose(){
        this.setState({
            isOpened:false
        })
    }
    gotoQuicklyFoundModify(docId){
        app.navigateTo('../quicklyFoundModify/quicklyFoundModify'+'?id'+docId)
    }

    // 服务说明
    show(){
        Taro.showModal({
            title: '服务说明  ',
            content: '支付完成后即可享医生询问，24小时内不限次数医生收到咨询后会尽快回复咨询，但由于医生工作繁忙，很多时候只能利用工作之外的时间来回复咨询，如有特殊情况不能回复,请谅解超过24小时内医生未回复，系统将自动退款',
            showCancel:false,
            confirmColor:'#0000FF'
          })
      }
      setTitle(){
        Taro.setNavigationBarTitle({
            title:this.$router.params.title
        });
      }


offect = 0;
length = 3;
total = 3;
// onReachBottom(){
//     if(this.offect+this.length<this.total){
//         app.success("正在加载----")
//         this.offect = this.offect+this.length
//         this.getDate2();
//     }else{
//         app.success("没有跟多数据了")
//     }
// }


    getDate1(){
        let me = this
        let data = {token:'',id:this.$router.params.id}
        app.get('json/liangguan/docTeamInfo.json',data,function(res){
            me.setState({
                docTeamInfo:res.data.result
            })
        })
    }
    getDate2(){
        let me = this
        let data = {token:'',offect:this.offect,length:this.length ,id:this.$router.params.id}
        let arrs = []
        app.get('json/liangguan/docTeamInfos.json',data,function(res){
            arrs = arrs.concat(res.data.result.list)
            // me.total = res.data.result.total
            me.setState({
                docTeamInfos:arrs
            })
        })
    }
    componentDidMount(){
        this.getDate1();
        this.getDate2();
        this.setTitle();
    }

    render(){
        // 领衔医生及其他数据
        let docTeamInfo = this.state.docTeamInfo
        // 领衔专家
        let infoList = <View className='docInfo'>
                                <View>
                                    <Image
                                    className='avider'
                                    src={docTeamInfo.head_image}
                                    />
                                </View>
                                <View className='infoText'>
                                    <View className='textTile'>
                                        <View>   
                                            <Text className='name'>{docTeamInfo.name}</Text>
                                            <Text className='t'>{docTeamInfo.positional_title}</Text>
                                        </View>
                                        <View>
                                            <Image className='starStyle' src={star}/>
                                            <Text className='tn'>{docTeamInfo.koubei}</Text>
                                        </View>            
                                </View>
                                <View ><Text>{docTeamInfo.hospital}</Text></View>
                                <View>
                                    <Text>擅长：{docTeamInfo.speciality}</Text>
                                </View>
                            </View>
                        </View>
        // 团队其他医生
        let docTeamInfosList = this.state.docTeamInfos.map((item)=>{
        return  <View className='docInfo'>
                    <View>
                        <AtAvatar
                        className='contentAvatorSize'
                        image={item.head_image}
                        circle
                        />
                    </View>
                    <View className='infoText'>
                        <View className='textTile'>
                            <View>
                                <Text className='name'>{item.name}</Text>
                                <Text className='t'>{item.positional_title}</Text>
                            </View>          
                        </View>
                        <View className='textHos'><Text>{item.hospital}</Text></View>
                    </View>
                </View>  
        })

        return(
            <View className='bigBox'>
            {/* 团队信息 */}
                <View className='topTitle'>
                    <View className='advatarTitle'>
                        <AtAvatar image={docTeamInfo.head_image} className='advatarTitleSize' circle/>
                    </View>
                    <View className='titleText'>
                        <View className='title3'>
                            <Text>{docTeamInfo.title}</Text>
                        </View>
                        <View className='title2'>
                            <Text className='t-left'>服务人数：{docTeamInfo.fuwushu}</Text>
                            <Text className='t-right'>回复次数：{docTeamInfo.huifushu}</Text>
                        </View>
                    </View>
                </View>
                <View className='content1'>
                    <View className='content1Title'>
                    <View><Text className='title'>团队介绍</Text></View>
                    <View><Image src={right} className='right-image'/></View>
                    </View>
                    <View className='content1Text'>
                        <Text className='title2'>团队擅长: {docTeamInfo.summary}</Text>
                    </View>
                </View>
                <View className='content1'>
                <View className='content1Title'>
                    <View><Text className='title'>领衔专家</Text></View>
                    <View><Image src={right} className='right-image'/></View>
                </View>
                {/* 领衔专家信息 */}
                <View>{infoList}</View>   
                </View>
                {/* 其他成员 */}
                <View className='content1'>
                    <View className='content1Title'>
                        <View><Text className='title'>团队其他成员</Text></View>
                        <View><Image src={right} className='right-image'/></View>
                    </View>
                    {/* 其他医生信息 */}
                    {docTeamInfosList}
                </View>
                {/* 底部按钮 */}
                <View className='list'>
                      <View className='list-item' onClick={this.show}>
                          <View className='list-left'>
                          <View className='title'>
                              <Text>服务说明</Text>
                          </View>
                          </View>
                          <View className='list-right'>
                              <Image className='right-icon' src={right} />
                          </View>
                      </View>
                      <View className='list-item'>
                          <View className='list-left'>
                          <View className='title'>
                              <Text>咨询费用</Text>
                          </View>
                          </View>
                          <View className='list-right'>
                              <Text className='t1'>￥{docTeamInfo.totalprice}元</Text>
                          </View>
                      </View>
                      <View className='list-item'>
                          <View className='list-left'>
                          <View className='title'>
                              <Text>付费券</Text>
                          </View>
                          </View>
                          <View className='list-right'>
                              <Text className='t2'>-￥ {docTeamInfo.coupon_discount}元</Text>
                              <Image className='right-icon' src={right} />
                          </View>
                      </View>
                      <View className='buttomView'>
                          <View className='button-left'>
                              <Text className='t4'>实际支付</Text>
                              <Text className='t3'>{docTeamInfo.totalpayble}元</Text>
                          </View>
                          <View className='button-right' onClick={this.gotoQuicklyFoundModify.bind(this,docTeamInfo.id)}>
                              <AtButton type='primary' >立即咨询</AtButton>
                          </View>
                      </View>
                  </View>
            </View>
        )
    }
}